iT邦幫忙

DAY 6
1

只是路過 HTML5 系列 第 6

HTML Audio/Video Methods

  • 分享至 

  • xImage
  •  

參考:
http://www.w3schools.com/tags/ref_av_dom.asp

HTML5 DOM 為<audio> 和<video> 提供了方法、屬性和事件。

方法包括:

addTextTrack()
canPlayType(type)
load()
play()
pause()

HTML5 DOM 為<audio> 和<video> 提供了方法、屬性和事件。

這些方法、屬性和事件可以用JavaScript 來控制<audio> 和<video> 。

HTML Video Element 對象

<video id="video_id" loop="loop" src=""></video>

<script>
var video = document.getElementById("video_id");
</script>

HTML Audio/Video Methods

方法:

addTextTrack()
在media中加入文字track

Example:

text1=myVid.addTextTrack("caption");
text1.addCue(new TextTrackCue("Test text", 01.000, 04.000,"","","",true));

TextTrackCue 對象的構造函數帶有id(例如“Test text”)、
startTime、endTime、插入點text、
webVTT cue settings 參數(用於定位、調整字體大小和對齊方式)
和pauseOnExit Boolean標記
(我找了TextTrackCue資料,可以參考下面連結)

參考:
http://www.html5rocks.com/zh/tutorials/track/basics/
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#texttrackcue

canPlayType(type)
是否能播放某種格式的檔案

例如:
可以播放的類型是MIME type
檢測是否支持fooType 這樣的MIME type

code:

!!(document.createElement('video').canPlayType('fooType'));

load()
重新加載src指定的資源,是在影片需要動態讀取來源時使用。

play()
播放視訊,會將paused的值置為false

pause()
暫停視訊,會將paused的值置為true

// Global variable to track current file name.
        var currentFile = "";
        function playAudio() {
            // Check for audio element support.
            if (window.HTMLAudioElement) {
                try {
                    var oAudio = document.getElementById('myaudio');
                    var btn = document.getElementById('play'); 
                    var audioURL = document.getElementById('audiofile'); 

                    //Skip loading if current file hasn't changed.
                    if (audioURL.value !== currentFile) {
                        oAudio.src = audioURL.value;
                        currentFile = audioURL.value;                       
                    }

                    // Tests the paused attribute and set state. 
                    if (oAudio.paused) {
                        oAudio.play();
                        btn.textContent = "Pause";
                    }
                    else {
                        oAudio.pause();
                        btn.textContent = "Play";
                    }
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                     if(window.console && console.error("Error:" + e));
                }
            }
        }

ref:
使用 JavaScript 控制 Audio 物件
http://msdn.microsoft.com/zh-tw/library/ie/gg589489(v=vs.85).aspx

筆記心得:

找video api資料的時候,找到了這個文件,
之前有看到w3schools這個網站,
因為很多觀念都不懂,找了一堆資料、不知道從何看起~
不曉得要從方法、屬性和事件去研究。
現在回過頭來~
我好像一開始應該從這個開始看會比較好。
每種方法都是一種學習摟,找資料也是學問~

找的越多就覺得自己越多不會> <
目前HTML5/CSS3/Java Script API 相互應用,對我來說、還是有點模糊,
邊學習邊打技術筆記~感覺還是很勉強
之後必須要好好整理才行。


上一篇
HTML5的Video標籤(3)
下一篇
HTML Audio/Video Properties(1)
系列文
只是路過 HTML5 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
joombuopre
iT邦新手 3 級 ‧ 2012-10-15 00:09:19

共勉之,多多練習就有機會進步!

iamya iT邦新手 2 級 ‧ 2012-10-15 10:27:46 檢舉

謝謝你...
看到很多技術組的神人,寫的文章都超級專業
想想自己就真的跌跌撞撞,學得好慢阿><
但希望可以進步啦~
無論自身態度還是技術
都希望可以努力學習!
感謝大大的勉勵><

krarm iT邦好手 1 級 ‧ 2012-10-15 11:12:10 檢舉

iamya提到:
跌跌撞撞

像我直接自爆

炸死你

我要留言

立即登入留言